<template>
  <view class="page">
    <div class="header">
      <div class="flex">
        <div>总资产(元)</div>
      </div>
      <div class="flex money">
        <div class="count">{{ designerUser?.nowMoney }}</div>
        <div class="flex btns"></div>
      </div>
      <div class="tixian-list">
        <div class="tx-item">
          <div class="tx-title">可提现金额(元)</div>
          <div class="tx-money">{{ banks?.commissionCount }}</div>
          <image class="right-icon" src="https://cos.aitshirt.cn/app-icon/%E8%B7%AF%E5%BE%84%20224%402x.png" alt=""></image>
        </div>
        <div class="tx-item">
          <div class="tx-title">累计提现(元)</div>
          <div class="tx-money">{{ designerUser?.extractCount }}</div>
          <image class="right-icon" src="https://cos.aitshirt.cn/app-icon/%E8%B7%AF%E5%BE%84%20224%402x.png" alt=""></image>
        </div>
      </div>
    </div>
    <view class="container">
      <text class="title">选择提现方式</text>
      <view class="option-list">
        <view class="option-item">
          <image src="https://cos.aitshirt.cn/app-icon/wx.png" class="icon"></image>
          <text class="option-text">微信零钱</text>
          <radio value="wechat" :checked="from.extractType === 'weixin'" color="#F25A27" class="radio" style="transform: scale(0.7)" @click="from.extractType = 'weixin'"></radio>
        </view>
        <view class="option-item">
          <image src="https://cos.aitshirt.cn/app-icon/zfb.png" class="icon"></image>
          <text class="option-text">支付宝</text>
          <radio value="alipay" :checked="from.extractType === 'alipay'" color="#F25A27" class="radio" style="transform: scale(0.7)" @click="from.extractType = 'alipay'"></radio>
        </view>
      </view>
    </view>

    <view class="withdraw-container">
      <view class="withdraw-amount">
        <view class="section-title">提现账号</view>
        <view class="amount-input-container" v-if="from.extractType === 'weixin'">
          <view class="currency-symbol" style="font-size: 28rpx">微信号: </view>
          <input v-model="from.weixin" type="digit" class="amount-input" placeholder="请输入微信号" maxlength="16" />
        </view>
        <view class="amount-input-container" v-if="from.extractType === 'alipay'">
          <view class="currency-symbol" style="font-size: 28rpx">支付宝用户名: </view>
          <input v-model="from.alipayCode" type="digit" class="amount-input" placeholder="请输入支付宝用户名" maxlength="16" />
        </view>
        <view class="amount-input-container" v-if="from.extractType === 'alipay'">
          <view class="currency-symbol" style="font-size: 28rpx">支付宝账号: </view>
          <input v-model="from.name" type="digit" class="amount-input" placeholder="请输入支付宝账号" maxlength="16" />
        </view>
      </view>
      <!-- 提现金额区域 -->
      <view class="withdraw-amount">
        <view class="section-title">提现金额</view>
        <view class="amount-input-container">
          <view class="currency-symbol">¥</view>
          <input v-model="from.money" type="digit" class="amount-input" placeholder="请输入提现金额" />
        </view>
        <div class="fee-all">
          <!--                    <view class="fee-info">手续费: ¥ {{ fee }}</view>-->
          <view class="withdraw-all" @click="withdrawAll">全部提现</view>
        </div>
      </view>

      <!-- 提现须知区域 -->
      <view class="withdraw-notice">
        <view class="section-title">提现须知:</view>
        <view class="notice-list">
          <rich-text :nodes="banks.explanation"></rich-text>
        </view>
      </view>
    </view>
    <div class="btns">
      <view class="pay-button" @click="handlePay()"> 立即提现</view>
    </div>
  </view>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { getDesignUser } from '@/api/designUser';
import { onShow } from '@dcloudio/uni-app';
import { getBank, postCashInfo } from '@/api/user';
import { useRouter } from 'uni-mini-router';
const router = useRouter();
const extractType = ref('wechat');
// 提现金额
const amount = ref('');
// 手续费
const fee = ref('0.5');
// 用户余额
// const balance = ref('1000.00');
const from = ref({
  alipayCode: '',
  extractType: 'weixin',
  money: '',
  name: '',
  weixin: '',
});

// 支付方式数据
const paymentMethods = ref([
  { name: '微信', icon: 'https://cos.aitshirt.cn/app-icon/wx.png' },
  { name: '支付宝', icon: 'https://cos.aitshirt.cn/app-icon/zfb.png' },
]);

// 全部提现
const withdrawAll = () => {
  from.value.money = banks.value?.commissionCount;
};

// 处理提现
const handleWithdraw = () => {
  if (!from.value.money || parseFloat(from.value.money) <= 0) {
    uni.showToast({
      title: '请输入提现金额',
      icon: 'none',
    });
    throw new Error('请输入提现金额');
    return;
  }
  if (parseFloat(from.value.money) < parseFloat(banks.value.minPrice)) {
    uni.showToast({
      title: `最低提现金额: ${banks.value.minPrice}`,
      icon: 'none',
    });
    throw new Error(`最低提现金额: ${banks.value.minPrice}`);
    return;
  }

  // uni.showModal({
  //   title: '提现确认',
  //   content: `您将提现¥${from.value.money}`,
  //   success: (res) => {
  //     if (res.confirm) {
  //       postCashInfo({ ...from.value })
  //         .then((res) => {
  //           uni.showToast({
  //             title: '提现申请已提交',
  //             icon: 'success',
  //           });
  //         })
  //         .finally(() => {
  //           queryDesignUser();
  //         });
  //       // 这里可以添加实际的提现逻辑
  //     }
  //   },
  // });
};

const designerUser = shallowRef<any>({});

function queryDesignUser() {
  getDesignUser().then((res) => {
    designerUser.value = res.data;
  });
}
// /*
//  * 提现银行
//  * */
// export function getBank() {
//   return request.get('/extract/bank')
// }
//
// /*
//  * 提现申请
//  * */
// export function postCashInfo(cash) {
//   return request.post('/extract/cash', cash)
// }

const banks = shallowRef({});

onShow(() => {
  queryDesignUser();
  getBank().then((res) => {
    console.log('res', res);
    banks.value = res.data;
  });
});

const handlePay = () => {
  handleWithdraw();
  postCashInfo({ ...from.value }).then((res) => {
    uni.showToast({
      title: '提现申请已提交',
      icon: 'none',
      success: () => {
        from.value = {
          alipayCode: '',
          extractType: 'weixin',
          money: '',
          name: '',
          weixin: '',
        };
        setTimeout(() => {
          router.back(1);
        }, 1000);
      },
    });
  });
};
</script>

<style scoped lang="scss">
.page {
  background: #f3f7f8;
  padding: 16rpx;
  min-height: calc(100% - 32rpx);
  padding-bottom: 140rpx;
}

.container {
  min-height: 222rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 32rpx 16rpx;
  margin-top: 16rpx;
  .title {
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
    line-height: 40rpx;
  }
  .option-list {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
    padding: 24rpx 20rpx 0 0;
    .option-item {
      display: flex;
      align-items: center;
      .icon {
        width: 32rpx;
        height: 32rpx;
      }
      .option-text {
        font-weight: 400;
        font-size: 28rpx;
        color: #222222;
        line-height: 38rpx;
        margin: 0 16rpx;
      }
      .radio {
        width: 28rpx;
        height: 28rpx;
        margin-left: auto;
      }
    }
  }
}

.header {
  display: flex;
  flex-direction: column;
  //height: 250rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 32rpx 16rpx;

  .flex {
    font-weight: 400;
    font-size: 28rpx;
    color: #222222;

    &.money {
      margin: 16rpx 0;
    }
  }

  .count {
    font-weight: bold;
    font-size: 64rpx;
    color: #f25a27;
    line-height: 90rpx;
  }

  .btns {
    gap: 16rpx;
  }

  .tixian-list {
    position: relative;
    display: flex;
    align-items: center;
    height: 66rpx;
    gap: 64rpx;

    &:after {
      position: absolute;
      left: 50%;
      content: '';
      width: 0rpx;
      height: 32rpx;
      border: 1rpx solid #e4e4e4;
      transform: translateX(-50%);
    }

    .tx-item {
      width: 50%;
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 32rpx;

      .tx-title {
      }

      .tx-money {
        font-weight: bold;
        margin: 0 16rpx;
      }

      .right-icon {
        width: 12rpx;
        height: 20rpx;
        margin-left: auto;
      }
    }
  }
}

.withdraw-container {
  padding: 16rrpx;
  background-color: #f5f5f5;
  margin: 16rpx 0 0;
  .withdraw-amount {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    position: relative;
    .amount-input-container {
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid #eee;
      padding-bottom: 20rpx;
      margin-bottom: 20rpx;
      .currency-symbol {
        font-weight: bold;
        font-size: 38rpx;
        color: #222222;
        line-height: 38rpx;
      }
      .amount-input {
        flex: 1;
        height: 38rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #6f6f6f;
        line-height: 38rpx;
        padding: 0 20rpx;
      }
    }
    .fee-all {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .fee-info {
      font-size: 24rpx;
      color: #222222;
    }

    .withdraw-all {
      float: right;
      font-weight: 400;
      font-size: 24rpx;
      color: #f25a27;
      line-height: 32rpx;
      text-align: right;
    }
  }
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
}

.withdraw-notice {
  border-radius: 16rpx;
  padding: 16rpx;
  margin-bottom: 100rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  .notice-list {
    margin-top: 20rpx;
    .notice-item {
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 34rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.pay-button {
  position: fixed;
  bottom: 40rpx;
  width: calc(100% - 64rpx);
  height: 72rpx;
  background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
  font-weight: 400;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 72rpx;
  text-align: center;
}

.payment-section {
  border-radius: 12rpx;
  padding: 20rpx 16rpx;
  margin: 16rpx 0 0;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.pay-button {
  position: fixed;
  bottom: 40rpx;
  width: calc(100% - 64rpx);
  width: 686rpx;
  height: 72rpx;
  background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
  font-weight: 400;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 72rpx;
  text-align: center;
}

.btns {
  width: 100vw;
  position: fixed;
  bottom: 0px;
  left: 0;
  height: 168rpx;
  background: #ffffff;
  box-shadow: 0rpx -2rpx 4rpx 2rpx rgba(9, 9, 9, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16rpx;
  padding: 0 32rpx;
}
</style>
